---
title: "Row Grouping - Row Group Panel"
enterprise: true
---
Use the Row Group Panel to enable users to modify the configured row group columns.

{% gridExampleRunner title="Enabling Row Group Panel" name="row-group-panel" /%}

## Enabling the Row Group Panel

The Row Group Panel allows users to modify which columns are grouped by using drag and drop. The panel can be enabled
by setting the `rowGroupPanelShow` grid option to `"always"` or `"onlyWhenGrouping"`.

Columns also need to have `enableRowGroup` set to `true` in their column definition to be dragged into the panel.

The example above enables the panel and configures the `country` and `year` columns to be controllable by the panel:
```{% frameworkTransform=true spaceBetweenProperties=true %}
const gridOptions = { 
    columnDefs: [
        { field: 'country', rowGroup: true, enableRowGroup: true },
        { field: 'year', rowGroup: true, enableRowGroup: true },
        // ...other column definitions
    ],
    // possible options: 'never', 'always', 'onlyWhenGrouping'
    rowGroupPanelShow: 'always',
}
```

## Row Group Panel in the Side Bar

The Row Group Panel is also displayed as part of the [Columns Tool Panel](./tool-panel-columns/) in the [Side Bar](./side-bar/).

{% gridExampleRunner title="Side Bar Row Group Panel" name="side-bar-row-group-panel" /%}

The example above enabled the [Columns Tool Panel](./tool-panel-columns/) using the following configuration:
```{% frameworkTransform=true %}
const gridOptions = { 
    sideBar: 'columns',
}
```

Refer to the [Side Bar](./side-bar/) documentation for further configuration options.

## Prevent User Grouping from Hiding Columns

After a user applies row grouping to a column, the column is hidden. If the user removes the row grouping, the column is made visible again.

This behaviour can be configured by setting the `suppressGroupChangesColumnVisibility` grid option property to `true`, `"suppressHideOnGroup"`
or `"suppressShowOnUngroup"`.

{% gridExampleRunner title="Keep Columns Visible" name="keep-columns-visible" /%}

{% note %}
When dragging a column over the row group panel, the column is considered outside of the grid and so will be hidden. This behaviour can be prevented by setting
`suppressDragLeaveHidesColumns` to `true`.
{% /note %}

The following configuration can be used to prevent the column visibility from being impacted when a user changes the row group columns:
```{% frameworkTransform=true %}
const gridOptions = { 
    suppressGroupChangesColumnVisibility: true,

    // prevent columns from being hidden when dragged over the row group panel
    suppressDragLeaveHidesColumns: true,
}
```

## Prevent Sorting

The panel displays sort indicators, and the column pills can be clicked to change their sort. This behaviour can be prevented by setting the
`rowGroupPanelSuppressSort` property to `true`.

{% gridExampleRunner title="Prevent Panel Sorting" name="prevent-panel-sorting" /%}

The previous example demonstrates the following configuration for preventing the Row Group Panel from sorting columns:
```{% frameworkTransform=true %}
const gridOptions = { 
    rowGroupPanelSuppressSort: true,
}
```

## Prevent Changes to Group Order

The panel can be used to reorder or remove row grouping from columns. To prevent this, `groupLockGroupColumns` can be set to prevent
removing or reordering columns. Providing `-1` will lock all columns, or provide a number representing the number of columns to lock.

{% gridExampleRunner title="Prevent Group Order Changes" name="prevent-group-order-changes" /%}

The example above demonstrates locking the columns from their grouping being moved or removed:
```{% frameworkTransform=true %}
const gridOptions = { 
    groupLockGroupColumns: -1,
}
```

## Next Up

Continue to the next section to learn about [Expanding Groups](./grouping-opening-groups/).
